<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>暗棋</title>
<style>
	@media (min-width:0px) and (max-width:992px) {
		body{
			line-height:150%;
			background:url(img/bg.jpg);
			color: white;
			font-size:30px;
		}
		input[type=text] {
			background-color: rgba(0,0,0,0);
			color: white;
			width: 400px;
			height: 60px;
			font-size:30px;
		}
		input[type=button] {
			background-color: rgba(0,0,0,0);
			color: white;
			width: 200px;
			height: 60px;
			font-size:30px;
		}
		dialog{
			background-color: rgba(48, 77, 217, 1);
			color: white;
			width: 50%;
			font-size:30px;
			text-align: center;
		}
		div{margin:20px;}
	}
	@media (min-width:992px) {
		body{
			line-height:120%;
			background:url(img/bg.jpg);
			color: white;
			font-size:15px;
		}
		input[type=text] {
			background-color: rgba(0,0,0,0);
			color: white;
			width: 240px;
			height: 30px;
			font-size:15px;
		}
		input[type=button] {
			background-color: rgba(0,0,0,0);
			color: white;
			width: 120px;
			height: 30px;
			font-size:15px;
		}
		dialog{
			background-color: rgba(48, 77, 217, 1);
			color: white;
			width: 50%;
			font-size:15px;
			text-align: center;
		}
		div{margin:5px;}
	}
</style>
</head>
<body>
<canvas id="canvas" style="background: url(img/table.jpg);"></canvas>
<audio src="audio/click.wav" id="clickAudio" preload="auto"></audio>
<audio src="audio/select.wav" id="selectAudio" preload="auto"></audio>
<audio src="audio/cancel.wav" id="cancelAudio" preload="auto"></audio>
<audio src="audio/eat.wav" id="eatAudio" preload="auto"></audio>
<audio src="audio/show.wav" id="showAudio" preload="auto"></audio>
<div>
	<input type="text" id="ipInput" placeholder="服务器ip地址"/>
	<input type="button" id="connectServer" value="连接服务器"/>
</div>
<div>
	<input type="button" id="createRoom" value="创建房间"/>
	<input type="button" id="joinRoom" value="加入房间"/>
	<input type="button" id="quitRoom" value="退出房间"/>
	<input type="button" id="startGame" value="开始对局"/>
</div>
<div>
	<input type="text" id="chatInput" placeholder="聊天内容"/>
	<input type="button" id="sendChat" value="发送聊天"/>
	<input type="button" id="retract" value="悔棋"/>
</div>
<div id="info"> </div>
<dialog id="createRoomDlg">
	<div>等待其他玩家进入房间……</div>
	<div><input type="button" id="createRoomCancel" value="退出房间"/></div>
	
</dialog>
<dialog id="joinRoomDlg">
	<input type="button" onclick="com.get('joinRoomDlg').close()" value="关闭"/>
	<div id="roomList"></div>
</dialog>
<script src="js/common.js"></script> 
<script src="js/play.js"></script> 
<script src="js/net.js"></script>
</body>
</html>